<template>
    <div class="content">
        <el-container class="content">
            <el-header class="headers">
                <el-form :inline="true">
                    <el-row>
                        <el-col :span="21">
                            <el-form-item :label="$t('webAuto.applicant')" style="width: 200px">
                                <el-input v-model="data.proposer" />
                            </el-form-item>
                            <el-form-item :label="$t('webAuto.RequestNo')" style="width: 200px">
                                <el-input v-model="data.oddNumber" />
                            </el-form-item>
                            <el-form-item :label="$t('webAuto.ApprovalStatus')">
                                <el-select v-model="data.status" :placeholder="$t('webAuto.PleaseSelect')" style="width:150px">
                                    <el-option :label="$t('webAuto.inProgress')" value="RUNNING" />
                                    <el-option :label="$t('webAuto.ApprovalRejected')" value="REFUSE" />
                                    <el-option :label="$t('webAuto.Approved')" value="PASS" />
                                    <el-option :label="$t('webAuto.ApprovalRevocation')" value="CANCEL" />
                                    <el-option :label="$t('webAuto.InvalidApproval')" value="CANCELLATION" />
                                </el-select>
                            </el-form-item>
                            <el-form-item :label="$t('webAuto.date')">
                                <el-date-picker style="width:240px" v-model="data.period" type="daterange"
                                                :range-separator="$t('webAuto.to')" :start-placeholder="$t('webAuto.start')" :end-placeholder="$t('webAuto.end')"
                                                format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="3">
                            <el-form-item style="width: 200px;">
                                <el-button type="primary" @click="onSubmit" style="width: 50px;height: 30px;">
                                    {{ $t('calendar.search') }}
                                </el-button>
                                <el-button type="info" @click="onRest" style="width: 50px;">
                                    {{ $t('calendar.rest') }}
                                </el-button>
                                <el-button type="warning" @click="exportExcel" style="width: 50px;">
                                    {{ $t('webAuto.export')}}
                                </el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </el-header>
            <el-main class="tableList">
                <el-table border :data="data.tablesList" :fit="true" table-layout="fixed" header-align="center" stripe
                          style="height:95%;width:100%"
                          :header-cell-style="{ color: '#000', textAlign: 'center', borderColor: ' #CCC', background: '#f9f9f9' }"
                          :cell-style="{ textAlign: 'center' }">
                    <el-table-column fixed="right" :label="$t('webAuto.operate')" width="100" >
                        <template #default="scope">
                            <el-button type="warning" text bg size="small" @click="showProcess(scope.row)">{{ $t('webAuto.ViewForm') }}</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column prop="processDefName" :label="$t('webAuto.processName')" width="150" />
                    <el-table-column prop="businessKey" :label="$t('webAuto.ProcessNumber')" width="170" />
                    <el-table-column prop="perosoname" :label="$t('webAuto.ProcessApplicant')" width="130" />
                    <el-table-column prop="status" :label="$t('webAuto.ProcessStatus')" width="120">
                        <template #default="scope">
                            <el-tag v-if="scope.row.status == '审批进行中'" type="primary">{{scope.row.status}}</el-tag>
                            <el-tag v-else-if="scope.row.status == '审批通过'" type="success">{{scope.row.status}}</el-tag>
                            <el-tag v-else-if="scope.row.status == '审批被驳回'" type="warning">{{scope.row.status}}</el-tag>
                            <el-tag v-else-if="scope.row.status == '审批被撤销'" type="info">{{scope.row.status}}</el-tag>
                            <el-tag v-else-if="scope.row.status == '审批被作废'" type="danger">{{scope.row.status}}</el-tag>
                            <el-tag v-else >{{scope.row.status}}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="startTime"  :label="$t('webAuto.LCstartTime')" width="180" />
                    <el-table-column prop="finishTime" :label="$t('webAuto.LCendTime')" width="180" />

                    <el-table-column prop="name" :label="$t('webAuto.fullName')"  width="200" />
                    <el-table-column prop="id" :label="$t('webAuto.workNumber')"  width="200" />
                    <el-table-column prop="deptName" :label="$t('webAuto.department')" width="200" />
                    <el-table-column prop="field1200495433314" :label="$t('WPSQ.field1200495433314')" width="200" />
                    <el-table-column prop="field2466649562319" :label="$t('WPSQ.field2466649562319')" width="120" />
                    <el-table-column prop="field7151949367153" :label="$t('WPSQ.field7151949367153')" width="120" />
                    <el-table-column prop="field1182349385854" :label="$t('WPSQ.field1182349385854')" width="120" />
                    <el-table-column prop="field1001649407536" :label="$t('WPSQ.field1001649407536')" show-overflow-tooltip width="200" />
                    <el-table-column prop="field4781349421202" :label="$t('WPSQ.field4781349421202')" width="200" />
                    <el-table-column prop="field9571049533686" :label="$t('WPSQ.field9571049533686')"  width="200" />
                    <el-table-column prop="field2747849615071" :label="$t('WPSQ.field2747849615071')" width="150"/>
                </el-table>
                <div class="demo-pagination-block">
                    <el-pagination :currentPage="data.currentPage" :page-size="data.pageSize"
                                   :page-sizes="[20, 30, 50, 100]" :small="small" :disabled="disabled" :background="background"
                                   layout="total, sizes, prev, pager, next, jumper" :total="data.total"
                                   @size-change="handleSizeChange" @current-change="handleCurrentChange" />
                </div>
                <el-dialog direction="rtl" :title="$t('webAuto.ProcessDetails')" v-model="data.processVisible" closeFree
                           style="height: auto;min-height:100%;;width: 100%;margin:0!important;" :close-on-click-modal="false"
                           :close-on-press-escape="false">
                    <instance-preview v-if="data.processVisible" :instance-id="data.selectInstance.instanceId"
                                      @handler-after="handlerAfter"></instance-preview>
                </el-dialog>
            </el-main>
        </el-container>
    </div>
</template>

<script setup>
import report, {WPSQReport,ExportWPSQReport
} from '@/api/report.js'
import { onMounted, reactive, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import InstancePreview from "@/views/workspace/approval/ProcessInstancePreview2.vue";
import {dateListEnd, dateListStart} from "@/views/report/data.js";
import { useI18n } from 'vue-i18n';


const { t } = useI18n();
components: {
    InstancePreview
}
const data = reactive({
    proposer: '',
    oddNumber: '',
    status: '',
    period: [],
    currentPage: 1,
    pageSize: 10,
    total: 0,
    tablesList: [],
    processVisible: false,
    selectInstance: {},
})

// 表格绑定的默认样式
const small = ref(false)
const background = ref(false)
const disabled = ref(false)

// 页面显示加载
onMounted(() => {
    let a = dateListEnd()
    let b = dateListStart(a)
    data.period = [b, a]
    tableList()
})

// 分页
const handleSizeChange = (val) => {
    data.pageSize = val
    tableList()
}
const handleCurrentChange = (val) => {
    data.currentPage = val
    tableList()
}

const tableList = () => {
    let start = ''
    let end = ''
    if (data.period.length > 0) {
        start = data.period[0]
        end = data.period[1]
    }
  let map = {}
  report.WPSQReport({
        pageSize: data.pageSize,
        pageNo: data.currentPage,
        startTime: start,
        endTime: end,
        userName: data.proposer,
        businessKey: data.oddNumber,
        businessStatus: data.status,
        map
    }).then(res => {
        data.tablesList = res.data.records
        data.total = res.data.total
    }).catch(err => {
        console.log(err)
        ElMessage.error(err.response.data)
    })
}

// 查询
const onSubmit = () => {
    data.currentPage = 1
    tableList()
}
// 重置
const onRest = () => {
    data.proposer = ''
    data.oddNumber = ''
    data.status = ''
    data.period = []
    data.contractName = ''
    data.currentPage = 1
    tableList()
}
// 导出
const exportExcel = () => {
    let start = ''
    let end = ''
    if (data.period.length > 0) {
        start = data.period[0]
        end = data.period[1]
    }
  let map ={}
    ElMessageBox.confirm(t('webAuto.exportCurrentData'),  t('webAuto.prompt'), {
        confirmButtonText: t('webAuto.sure'),
        cancelButtonText: t('webAuto.cancel'),
        type: 'warning'
    }).then(() => {
        report.ExportWPSQReport({
            pageSize: data.pageSize,
            pageNo: data.currentPage,
            startTime: start,
            endTime: end,
            userName: data.proposer,
            businessKey: data.oddNumber,
            businessStatus: data.status,
            map
        }).then(res => {
            const blob = new Blob([res.data], { type: 'application/vnd.ms-excel;charset=UTF-8' });
            const fileName = "外派申请.xlsx"
            const url = window.URL.createObjectURL(blob)
            const link = document.createElement("a")
            link.href = url;
            link.setAttribute("download", fileName);
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            window.URL.revokeObjectURL(url);
        })
    }).catch(() => {
        ElMessage.info(t('webAuto.CancelExport'))
    })
}

//查看表格里面的表单
const showProcess = (row) => {
    data.processVisible = true
    data.selectInstance = row
}

const handlerAfter = () => {
    data.processVisible = false
    // this.getIdoList()
}
</script>

<style scoped lang="less">
@import url('../index.less');
</style>